<template>
    <div>
        <PageTitle v-if="asset">
            <h1>Assets <i class="material-icons">chevron_right</i> {{asset.name}} <i class="material-icons">chevron_right</i> Systems</h1>
        </PageTitle>

        <Panel>
            <div class="toolbar">

                    <select name="" id="viewSort">
                        <option value="all-items">View: All Items</option>
                        <option value="5">5 miles</option>
                    </select>
                <div class="right">
                        <button class="toolbar__btn edit-view-button">
                           Edit View
                        </button>
                    <button class="toolbar__btn create-new-view-button filled">
                        Create New View
                    </button>
                </div>

            </div>
            <SortableTable v-if="systems" :array="systems" :columns="columns"></SortableTable>
        </Panel>

    </div>
</template>
<script>
    import axios from 'axios'
    import SortableTable from './SortableTable.vue'
    import Panel from './Panel.vue'
    import PageTitle from './PageTitle.vue'

    export default {
        components:{
            SortableTable,
            Panel,
            PageTitle
        },
        data() {
            return {
                asset: null,
                systems: null,
                assetIcon: require('../../assets/img/Assets-Icon.svg'),
                columns: [
                    {
                        name: 'ID',
                        slug: 'id'
                    },
                    {
                        name: 'Name',
                        slug: 'name'
                    },
                    {
                        name: 'Type',
                        slug: 'type'
                    },
                    {
                        name: 'Installed',
                        slug: 'installed'
                    },
                    {
                        name: 'Installed By',
                        slug: 'installed_by'
                    },
                    {
                        name: 'Components',
                        slug: 'components'
                    }
                ]

            }
        },

        mounted: function() {
            var self = this;
            axios.get(process.env.API_ROOT + '/assets/' + this.id, {
            }).then(function(response) {
                self.asset = response.data;
            });


            axios.get(process.env.API_ROOT + '/assets/' + this.id + '/systems', {
            }).then(function(response) {
                _.forEach(response.data, function(system) {

                    var systemId = system["id"];
                    system.id = '<a href="#/system/' + systemId + '" class="">' + systemId + '</a>';
                    system.name = '<a href="#/system/' + systemId + '" class="">' + system.name + '</a>';
                    system.components = '<a href="#/system/' + systemId + '/components/">' + system.components.length + '</a>';
                });

                self.systems = response.data;
                });

        },
        props: [
            'id'
        ]



    }
</script>